<template>
  <div>
    <van-nav-bar title="订单详情" left-arrow v-back left-text="返回" fixed class="order-detail__nav" />
    <div class="order-detail__container">
      <div class="order-detail">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">订单商品</div>
          <!-- <div class="order-detail__title__phone" @click="phone">
            <van-icon name="phone-o"></van-icon>
          </div> -->
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item order-detail__item_product" v-for="item in detailList">
            <div class="order-detail__el order-detail__img" v-bind:style="{backgroundImage: 'url(' + item.icon + ')'}">
            </div>
            <div class="order-detail__el order-detail__right">
              <div class="order-detail__right__top">
                <div>{{item.waterName}}</div>
                <!-- 线下支付判断 -->
                <div v-if="!detail.barrel">
                  <del class="order-detail__right__top__del">￥{{item.psum}}</del>￥{{item.asum}}
                </div>
                <div v-if="detail.barrel">￥{{item.psum}}</div>
              </div>
              <div>
                <template v-if="!detail.barrel">
                  <template v-if="item.pnum == item.anum">x{{item.anum}}</template>
                  <template v-else>
                    <del class="order-detail__right__top__del">x{{item.pnum}}</del>x{{item.anum}}
                  </template>
                </template>
                <template v-if="detail.barrel">x{{item.pnum}}</template>
              </div>
            </div>
            <!-- <div class="order-detail__el order-detail__name">{{item.waterName}}</div>
            <div class="order-detail__el order-detail__num">x{{item.pnum}}</div>
            <div class="order-detail__el order-detail__price">￥{{item.asum}}</div> -->
          </div>
          <div class="order-detail__count">
            <div class="order-detail__count__discount">
              已优惠<span class="price">￥0</span>
            </div>
            <div class="order-detail__count__total">
              小计<span class="price">
                <template v-if="!detail.barrel">
                  <del class="order-detail__count__total__del">￥{{detail.psum}}</del>
                  ￥{{detail.asum}}
                </template>
                <template v-else>
                  ￥{{detail.psum}}
                </template>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="order-detail" v-show="detail.wState == 2 && detail.reOrder == 1">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">回桶列表</div>
        </div>
        <div class="order-detail__content">
          <table class="bucket-count__table">
            <thead>
              <tr>
                <th>类型</th>
                <th v-for="item in detail.bucketList">{{item.name}}</th>
                <th>合计</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>买桶</td>
                <td v-for="item in detail.bucketList">{{buyBucket[item.id]}}</td>
                <td>{{buyBucket.total}}</td>
              </tr>
              <tr>
                <td>杂桶</td>
                <td v-for="item in detail.bucketList">{{exchangeBucket[item.id]}}</td>
                <td>{{exchangeBucket.total}}</td>
              </tr>
              <tr>
                <td>空桶</td>
                <td v-for="item in detail.bucketList">{{changeBucket[item.id]}}</td>
                <td>{{changeBucket.total}}</td>
              </tr>
              <tr>
                <td>赠桶</td>
                <td v-for="item in detail.bucketList">{{giveBucket[item.id]}}</td>
                <td>{{giveBucket.total}}</td>
              </tr>
              <tr>
                <td>合计</td>
                <td v-for="item in detail.bucketList">{{buyBucket[item.id] + exchangeBucket[item.id] + changeBucket[item.id] + giveBucket[item.id]}}</td>
                <td>{{buyBucket.total + exchangeBucket.total + changeBucket.total + giveBucket.total}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="order-detail" v-show="detail.wState == 2 && detail.reOrder == 1">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">水桶结算</div>
        </div>
        <div class="order-detail__content">
          <table class="bucket-count__table">
            <thead>
              <tr>
                <th>类型</th>
                <th v-for="item in detail.bucketList">{{item.name}}</th>
                <th>合计</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>欠桶</td>
                <td v-for="item in detail.bucketList">{{debtBucket[item.id]}}</td>
                <td>{{debtBucket.total}}</td>
              </tr>
              <tr>
                <td>还桶</td>
                <td v-for="item in detail.bucketList">{{backBucket[item.id]}}</td>
                <td>{{backBucket.total}}</td>
              </tr>
              <tr>
                <td>存桶</td>
                <td v-for="item in detail.bucketList">{{saveBucket[item.id]}}</td>
                <td>{{saveBucket.total}}</td>
              </tr>
              <tr>
                <td>合计</td>
                <td v-for="item in detail.bucketList">{{debtBucket[item.id] + backBucket[item.id] + saveBucket[item.id]}}</td>
                <td>{{debtBucket.total + backBucket.total + saveBucket.total}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- <div class="order-detail" v-if="detail.bucketRepayList && detail.bucketRepayList.length !== 0">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">欠桶列表</div>
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item order-detail__item_product" v-for="item in detail.bucketRepayList">
            <div class="order-detail__el order-detail__name">{{item.bucketName}}</div>
            <div class="order-detail__el order-detail__num">x{{item.num}}</div>
            <div class="order-detail__el order-detail__price">￥{{(item.num * item.bucketPrice).toFixed(1)}}</div>
          </div>
        </div>
      </div>
      <div class="order-detail" v-if="detail.bucketBuyList && detail.bucketBuyList.length !== 0">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">买桶列表</div>
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item order-detail__item_product" v-for="item in detail.bucketBuyList">
            <div class="order-detail__el order-detail__name">{{item.bucketName}}</div>
            <div class="order-detail__el order-detail__num">x{{item.num}}</div>
            <div class="order-detail__el order-detail__price">￥{{(item.num * item.bucketPrice).toFixed(1)}}</div>
          </div>
        </div>
      </div>
      <div class="order-detail" v-if="detail.bucketExchangeList && detail.bucketExchangeList.length !== 0">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">杂桶兑换列表</div>
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item order-detail__item_product" v-for="item in detail.bucketExchangeList">
            <div class="order-detail__el order-detail__name">{{item.bucketName}}</div>
            <div class="order-detail__el order-detail__num">x{{item.num}}</div>
            <div class="order-detail__el order-detail__price">￥{{(item.num * item.bucketPrice * 0.7).toFixed(1)}}</div>
          </div>
        </div>
      </div>
      <div class="order-detail" v-if="detail.bucketChangeList && detail.bucketChangeList.length !== 0">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">空桶兑换列表</div>
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item order-detail__item_product" v-for="item in detail.bucketChangeList">
            <div class="order-detail__el order-detail__name">{{item.bucketName}}</div>
            <div class="order-detail__el order-detail__num">x{{item.num}}</div>
            <div class="order-detail__el order-detail__price">￥{{(item.num * item.bucketPrice).toFixed(1)}}</div>
          </div>
        </div>
      </div>
      <div class="order-detail" v-if="detail.bucketGiveList && detail.bucketGiveList.length !== 0">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">赠桶列表</div>
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item order-detail__item_product" v-for="item in detail.bucketGiveList">
            <div class="order-detail__el order-detail__name">{{item.bucketName}}</div>
            <div class="order-detail__el order-detail__num">x{{item.num}}</div>
            <div class="order-detail__el order-detail__price">￥{{(item.num * item.bucketPrice).toFixed(1)}}</div>
          </div>
        </div>
      </div>
      <div class="order-detail" v-if="detail.bucketDepositList && detail.bucketDepositList.length !== 0">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">存桶列表</div>
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item order-detail__item_product" v-for="item in detail.bucketDepositList">
            <div class="order-detail__el order-detail__name">{{item.bucketName}}</div>
            <div class="order-detail__el order-detail__num">x{{item.num}}</div>
            <div class="order-detail__el order-detail__price">￥{{(item.num * item.bucketPrice).toFixed(1)}}</div>
          </div>
        </div>
      </div> -->
      <div class="order-detail">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">配送信息</div>
          <!-- <a class="edit-address__btn" @click="editOrder" >
            修改配送信息
            <van-icon name="arrow"></van-icon>
          </a> -->
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item">
            <div class="order-detail__item__tit">收货人：</div>
            <div class="order-detail__item__content order-detail__item__address">
              {{detail.stationName}}
            </div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">收获地址：</div>
            <div class="order-detail__item__content order-detail__item__address">
              {{detail.region + detail.address}}
            </div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">联系方式：</div>
            <div class="order-detail__item__content order-detail__item__address">
              {{detail.stationPhone}}
            </div>
          </div>
          <div class="order-detail__item" v-show="detail.carrierId !== 0">
            <div class="order-detail__item__tit">配送员：</div>
            <div class="order-detail__item__content order-detail__item__address">
              {{detail.carrierName}}&nbsp;&nbsp;&nbsp;{{detail.carrierPhone}}
            </div>
          </div>
        </div>
      </div>
      <div class="order-detail">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">订单信息</div>
          <div class="order-detail__title__status" v-bind:class="orderStatus(detail)">{{detail | orderStatusName}}</div>
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item">
            <div class="order-detail__item__tit">订单号：</div>
            <div class="order-detail__item__content">{{detail.id}}</div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">下单时间：</div>
            <div class="order-detail__item__content">{{detail.time}}</div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">支付方式：</div>
            <div class="order-detail__item__content">{{detail.paytype == 0 ? '线上付款' : '线下支付'}}</div>
          </div>
          <!-- <div class="order-detail__item">
            <div class="order-detail__item__tit">押桶方式：</div>
            <div class="order-detail__item__content">{{detail.exchange | getExchangeType}}</div>
          </div> -->
          <div class="order-detail__item" v-show="detail.wState == 2 && detail.reOrder == 1">
            <div class="order-detail__item__tit">水金额：</div>
            <div class="order-detail__item__content order-detail__total">
              {{detail.waterPrice}}元
            </div>
          </div>
          <div class="order-detail__item" v-show="detail.wState == 2 && detail.reOrder == 1">
            <div class="order-detail__item__tit">桶金额：</div>
            <div class="order-detail__item__content order-detail__total">
              {{detail.bucketPrice}}元
            </div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">应付总额：</div>
            <div class="order-detail__item__content order-detail__total">{{detail.psum}}元</div>
          </div>
          <div class="order-detail__item" v-show="detail.wState == 2 && detail.reOrder == 1">
            <div class="order-detail__item__tit">实付总额：</div>
            <div class="order-detail__item__content order-detail__total">
              <template v-if="!detail.barrel">{{detail.asum}}元</template>
              <template v-if="detail.barrel">{{detail.psum}}元</template>
            </div>
          </div>
          <div class="order-detail__item" v-show="detail.wState == 2 && detail.reOrder == 1">
            <div class="order-detail__item__tit">优惠金额：</div>
            <div class="order-detail__item__content order-detail__total">
              {{detail.discount}}元
            </div>
          </div>
          
          <div class="order-detail__item">
            <div class="order-detail__item__tit">订单备注：</div>
            <div class="order-detail__item__content">{{detail.remark == '' ? '暂无备注' : detail.remark}}</div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">回单备注：</div>
            <div class="order-detail__item__content">{{detail.reRemark == '' ? '暂无备注' : detail.reRemark}}</div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">审核意见：</div>
            <div class="order-detail__item__content">{{detail.reIdea == '' ? '暂无备注' : detail.reIdea}}</div>
          </div>
        </div>
      </div>
      <van-button type="primary" class="operate-btn" v-if="detail.wState == 1" @click="confirmSended(item)">确认收货
      </van-button>
      <!-- <van-button type="primary" class="operate-btn" v-if="detail.state != 3 && detail.payStatus == 0" @click="pay">付款
      </van-button> -->
    </div>
  </div>
</template>
<script>
  import {
    ORDER_DETAIL,
    ORDER_DETAIL_INFO,
    ORDER_CONFIRM
  } from '@/api/stock'
  export default {
    data() {
      return {
        detail: {},
        detailList: [], //商品
      }
    },
    computed: {
      //买桶统计
      buyBucket() {
        let obj = {},
          total = 0;
        if (this.detail && this.detail.bucketBuyList) {
          this.detail.bucketList.forEach(el => {
            obj[el.id] = 0;
          });
          this.detail.bucketBuyList.forEach(el => {
            obj[el.bucketId] = el.num;
            total += el.num;
          });
        }
        obj.total = total;
        return obj;
      },
      //杂桶统计
      exchangeBucket(){
        let obj = {},
          total = 0;
        if (this.detail && this.detail.bucketBuyList) {
          this.detail.bucketList.forEach(el => {
            obj[el.id] = 0;
          });
          this.detail.bucketExchangeList.forEach(el => {
            obj[el.bucketId] = el.num;
            total += el.num;
          });
        }
        obj.total = total;
        return obj;
      },
      //空桶兑换统计
      changeBucket(){
        let obj = {},
          total = 0;
        if (this.detail && this.detail.bucketBuyList) {
          this.detail.bucketList.forEach(el => {
            obj[el.id] = 0;
          });
          this.detail.bucketChangeList.forEach(el => {
            obj[el.bucketId] = el.num;
            total += el.num;
          });
        }
        obj.total = total;
        return obj;
      },
      //赠桶
      giveBucket(){
        let obj = {},
          total = 0;
        if (this.detail && this.detail.bucketBuyList) {
          this.detail.bucketList.forEach(el => {
            obj[el.id] = 0;
          });
          this.detail.bucketGiveList.forEach(el => {
            obj[el.bucketId] = el.num;
            total += el.num;
          });
        }
        obj.total = total;
        return obj;
      },
      //欠桶
      debtBucket(){
        let obj = {},
          total = 0;
        if (this.detail && this.detail.bucketBuyList) {
          this.detail.bucketList.forEach(el => {
            obj[el.id] = 0;
          });
          this.detail.bucketDebtList.forEach(el => {
            obj[el.bucketId] = el.num;
            total += el.num;
          });
        }
        obj.total = total;
        return obj;
      },
      //还桶
      backBucket(){
        let obj = {},
          total = 0;
        if (this.detail && this.detail.bucketBuyList) {
          this.detail.bucketList.forEach(el => {
            obj[el.id] = 0;
          });
          this.detail.bucketRepayList.forEach(el => {
            obj[el.bucketId] = el.num;
            total += el.num;
          });
        }
        obj.total = total;
        return obj;
      },
      //买桶
      saveBucket(){
        let obj = {},
          total = 0;
        if (this.detail && this.detail.bucketBuyList) {
          this.detail.bucketList.forEach(el => {
            obj[el.id] = 0;
          });
          this.detail.bucketDepositList.forEach(el => {
            obj[el.bucketId] = el.num;
            total += el.num;
          });
        }
        obj.total = total;
        return obj;
      },
      waterPrice() {
        let price = 0;
        this.detailList.forEach(el => {
          // if (this.detail.paytype) {
          if (this.detail.barrel) {
            price += el.psum
          } else {
            price += el.asum
          }
          // } else {
          //   price += el.psum
          // }
        });
        return price.toFixed(1);
      }
    },
    mounted() {
      this.getDetail();
    },
    methods: {
      //确认送达
      confirmSended(item) {
        this.$reqGet(ORDER_CONFIRM, {
          orderId: this.detail.id,
          state: 2
        }).then(res => {
          this.$toast('确认成功');
          this.$router.go(-1)
        }).catch(err => {
          this.$toast.fail('确认失败');
        });
      },
      getDetail() {
        this.$reqGet(ORDER_DETAIL, {
          orderId: this.$route.query.id
        }).then(res => {
          this.detail = res.rows[0];
          this.detailList.push(...this.detail.orderWaterList);
        })
      },
      onClickLeft() {
        // this.$router.push({
        //   path: '/order'
        // })
      },
      pay() {
        if ((new Date().getTime() - new Date(this.detail.time.replace(/\-/g, '/')).getTime()) > 30 * 60 * 1000) {
          this.$toast('该订单已超时，请重新下单');
          return;
        }
        this.$router.push({
          name: 'stockPay',
          params: {
            orderNo: this.detail.id,
            prepayId: this.detail.prepayId,
            total: this.detail.asum
          },
          query: {
            time: new Date(this.detail.time.replace(/\-/g, '/')).getTime()
          }
        });
      },
      //工单状态
      orderStatus(item) {
        if (item.wState == 3) {
          return 'order-status_cancel';
        }
        if (!item.paytype) {
          if (item.payStatus) {
            return 'order-status_cancel'
          }
        }
        if (item.wState == 0) {
          return 'order-status_wait';
        } else if (item.wState == 1) {
          return 'order-status_sending';
        } else if (item.wState == 2) {
          return 'order-status_finsih';
        }
        return '';
      },
      editOrder() {
        sessionStorage.setItem('changeOrderDetail', JSON.stringify(this.detail));
        this.$router.push({
          path: '/orderChange/' + this.detail.id,
          query: {
            stationId: this.detail.stationId,
            stationname: this.detail.stationName,
            addressId: this.detail.addressId,
            orderId: this.detail.id
          }
        })
      },
      phone() {
        window.location.href = 'tel:' + this.detail.dPhone;
      }
    },
    watch: {
      detail: {
        handler() {

        },
        deep: true
      }
    },
    filters: {
      orderStatusName(item) {
        if (item.wState == 3) {
          return '已取消';
        }
        if (!item.paytype) {
          if (item.payStatus) {
            return '待支付'
          }
        }
        if (item.wState == 0) {
          return '待配送';
        } else if (item.wState == 1) {
          return '配送中';
        } else if (item.wState == 2) {
          if(item.reOrder == 0){
            return '待审核';
          } else if(item.reOrder == 1){
            return '审核通过';
          } else if(item.reOrder == 2){
            return '不通过';
          }
        }
        return '';
      },
      //水桶押金方式名称
      getExchangeType(val) {
        let arr = ['欠桶', '还桶', '买桶', '杂桶兑换', '空桶兑换'];
        let res = [];
        if (val !== undefined) {
          val.split(',').forEach(el => {
            res.push(arr[el - 1] || '');
          });
          return res.toString() == '' ? '无' : res.toString();
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  @import '../../styles/variable.less';

  .order-detail__container {
    position: absolute;
    top: 46px;
    bottom: 45px;
    width: 100%;
    background-color: #f5f5f5;
    overflow: auto;
  }



  .order-detail {
    border-radius: 5px;
    margin: 8px;
    padding: 10px 10px 5px 10px;
    background-color: #ffffff;
    margin-bottom: 10px;
    color: #666666;
  }

  .order-detail__title {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 8px;
    margin-bottom: 8px;

    .order-detail__title__tag {
      flex: 0 0 4px;
      height: 17px;
      margin-top: 2px;
      margin-right: 6px;
      background-color: @col-the;
    }

    .order-detail__title__status {
      position: absolute;
      right: 5px;
      top: 0px;

      &.order-status_cancel {
        color: #999999;
      }

      &.order-status_unpay {
        color: @col-red;
      }

      &.order-status_wait {
        color: @col-yellow;
      }

      &.order-status_sending {
        color: @col-the;
      }
    }

    .order-detail__title__phone {
      position: absolute;
      right: 5px;
      top: 2px;

      i {
        font-size: 18px;
      }
    }
  }

  .order-detail__item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;

    .order-detail__item__tit {
      color: #999;
    }

    .order-detail__item__content {
      color: #343434;

      &.order-detail__total {
        color: @col-the;
      }

      &.order-detail__item__address {
        text-align: right;
      }
    }

    &.order-detail__item_product {
      // align-items: center;
      color: #999999;
    }



    .order-detail__el {
      font-size: 12px;

      &.order-detail__img {
        flex: 0 0 60px;
        height: 60px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }

      &.order-detail__name {
        flex: 0 0 35%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      &.order-detail__num {
        width: 45px;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
      }

      &.order-detail__status_sending,
      &.order-detail__total {
        color: @col-the;
      }

      &.order-detail__receiver {
        color: #888;
      }

      &.order-detail__right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 3px 0 5px 0;

        .order-detail__right__top {
          display: flex;
          justify-content: space-between;
          color: #000;

        }

        .order-detail__right__top__del {
          color: rgb(185, 185, 185);
          font-size: 10px;
          margin-right: 3px;
        }
      }
    }
  }

  .order-detail__count {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border-top: 1px solid #f5f5f5;
    padding-top: 5px;
    font-size: 12px;

    .order-detail__count__discount {
      margin-right: 10px;
      margin-bottom: 2px;

      .price {
        color: @col-the;
      }
    }

    .order-detail__count__total {
      .price {
        font-size: 18px;
        color: @col-the;
      }

      .order-detail__count__total__del {
        font-size: 12px;
        color: #666;
      }
    }
  }

  .edit-address__btn {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 12px;
    color: @col-the;

    i {
      position: relative;
      top: 2px;
    }
  }

  .operate-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 14px;
    letter-spacing: 10px;
  }
  .bucket-count__table{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    thead > tr > th{
      padding: 5px 0;
      font-size: 14px;
    }
    tbody > tr > td{
      padding: 5px 0;
      font-size: 15px;
    }
  }
</style>
